<link rel="stylesheet" href="ccay/example/demo.css"	type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<!--[if lte IE 8]><script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/plugins/flot/jquery.flot.pie.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/web/resource/ui/ccay.ui.chart.js" charset="utf-8" ></script>
<script type="text/javascript" src="ccay/example/ui/bar/barDemo.js" />
<div id="barDemo">
	<div title="API">
	  <div>
		<samp><h2>ops.lines属性说明：</h2></samp> 
		<div style='padding-left:30px'>
			<form id="param" class="init ccay-form">
				<div class="ccay-form-body ccay-form-custom">			
					<ul>
						<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						
						<li class="ccay-form-row">
							<samp>label: string</samp> 
					    	<span class="ccay-form-input">曲线名称</span>
						</li>
						<li class="ccay-form-row">
							<samp>xField: string</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中x坐标的设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>yField: string</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中y坐标的设置</span>
						</li>
						<li class="ccay-form-row">
							<samp>fnSetData: function</samp> 
					    	<span class="ccay-form-input">ajax方式返回的数据中自定义数据方法，fnSetData(item)，item数据项         <br> 例子：fnSetData:function(item){
							 return [item.month,item.income -item.profit]
							 }</span>
						</li>
						<li class="ccay-form-row">
							<samp>ajax:null</samp> 
					    	<span class="ccay-form-input">ajax设置</span>
						</li>
					</div>
					</form>
			</div>
			<samp><h2>ops.settings 全局定制配置项</h2></samp> 
				<div style='padding-left:30px'>
					 <form id="param" class="init ccay-form">
						<div class="ccay-form-body ccay-form-custom">	
							<li class="ccay-form-row">
								<samp><h3>初始化属性</h3></samp> 
						    	<span class="ccay-form-input">
						    		<h3>描述</h3> 
						    	</span>
							</li>
							<li class="ccay-form-row">
								<samp>xaxis</samp> 
						    	<span class="ccay-form-input">x轴设置 </span>
							</li>
							<li class="ccay-form-row">
								<samp>yaxis</samp> 
						    	<span class="ccay-form-input">y轴设置 </span>
							</li>
						  </div>
					 </form>
				</div>
				
				<samp><h2>bars柱图设置</h2></samp> 
				  <div style='padding-left:30px'>
					 <form id="param" class="init ccay-form">
					  <div class="ccay-form-body ccay-form-custom">	
					  	<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>
						<li class="ccay-form-row">
							<samp>show: boolean</samp> 
					    	<span class="ccay-form-input">是否显示   true表示显示  false 表示不显示</span>
						</li>
						<li class="ccay-form-row">
							<samp>fill: boolean or number</samp> 
					    	<span class="ccay-form-input">是否使用颜色填充显示   </span>
						</li>
						<li class="ccay-form-row">
							<samp>fillColor: null or color/gradient</samp> 
					    	<span class="ccay-form-input">填充颜色   null表示不填充颜色  color和gradient表示填充黑色   </span>
						</li>
						<li class="ccay-form-row">
							<samp>align: "left" or "center"</samp> 
					    	<span class="ccay-form-input">柱的位置 </span>
						</li>
						<li class="ccay-form-row">
							<samp>horizontal: boolean</samp> 
					    	<span class="ccay-form-input">是否横向显示   </span>
						</li>
						<li class="ccay-form-row">
							<samp>barWidth:number</samp> 
					    	<span class="ccay-form-input">设置柱的宽度，单位是数轴的单位而非像素 </span>
						</li>
						</div>
					  </form>
					</div>
					
					<samp><h2>ops.settings.xaxis/yaxis  x,y轴设置</h2></samp> 
				    <div style='padding-left:30px'>
					<form id="param" class="init ccay-form">
					  <div class="ccay-form-body ccay-form-custom">
					  	<li class="ccay-form-row">
							<samp><h3>初始化属性</h3></samp> 
					    	<span class="ccay-form-input">
					    		<h3>描述</h3> 
					    	</span>
						</li>	
						<li class="ccay-form-row">
							<samp>tickSize:number</samp> 
					    	<span class="ccay-form-input">刻度大小 </span>
						</li>
						<li class="ccay-form-row">
							<samp>min</samp> 
					    	<span class="ccay-form-input">刻度最小值</span>
						</li>
						<li class="ccay-form-row">
							<samp>max</samp> 
					    	<span class="ccay-form-input">刻度最大值</span>
						 </li>
						</div>
					</form>
				</div>
		</div>
		
	</div>
	
	<div title="柱图">
		<h4><span>柱图</span></h4>
		<div id=chart></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html1'>
&lt;h4>&lt;span>柱图&lt;/span>&lt;/h4>
&lt;div id=chart11>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js1'>
$('#chart11').chart({
		type:"bar",
		lines:[{label: '月度利润',xField:'month',yField:'profit'},
		       {label: '月度销售额',xField:'month',yField:'total'}
		],
		linesOp:{
			align:'center'
		},
		ajax:{
			url:'ccay/example/ui/chart/datas2.json'
		},
		settings:{
			xaxis:{tickFormatter: dateFormatter}
		},
});

//刻度格式化显示
function dateFormatter(v, axis) {
    return v+"月";
 }
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js1').html(),$('#html1').html())">试一试</a>
		</div>
	</div>
	
	<div title="柱图">
		<h4><span>柱图</span></h4>
		<div id=chart1></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html2'>
&lt;h4>&lt;span>柱图&lt;/span>&lt;/h4>
&lt;div id=chart22>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js2'>
$('#chart22').chart({
  type:"bar",
  height:500,
	lines:[{label: '月度利润',xField:'profit',yField:'month'},
		       {label: '月度销售额',xField:'total',yField:'month'}
	],
	linesOp:{
		horizontal:true,
		barWidth:0.6
	},
	settings:{
		yaxis:{tickSize:1,min:1,max:12},
		xaxis:{tickSize:2500}
	},
	ajax:{
		url:'ccay/example/ui/chart/datas2.json'
	}
});
			</pre>
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js2').html(),$('#html2').html())">试一试</a>
		</div>
	</div>
	
	<div title="支持时间格式的x轴">
		<div id=chart3></div>
		<br>
		<h3>html 源码:</h3>
		<div class="codeArea">
			<pre id='html3'>
&lt;div id='time4Xaxis'>&lt;/div>
			</pre>
		</div>
		<h3>js 源码:</h3>
		<div class="codeArea">
			<pre id='js3'>
$('#time4Xaxis').chart({
	type:"bar",
	lines:[{label: '年份',xField:'time',yField:'total'}
	],
	linesOp:{
		align:'center'
	},
	ajax:{
	    // 指定自己的数据源，返回json数据
		url : 'ccay/example/ui/chart/datas4timexaxis.json'
	},
	settings:{
		xaxis:{
			mode:"time",
			min:(new Date(1989, 1, 1)).getTime(),
			max:(new Date(1999, 1, 1)).getTime()
		}
	}
});
			</pre>
		</div>
		<div>
			<pre>
datas4timexaxis.json文件里的数据：			
{
"result" : [
    {
		"time" : 633801600000,
		"total" : 400
	}, {
		"time" : 696873600000,
		"total" : 500
	}, {
		"time" : 760032000000,
		"total" : 900
	}, {
		"time" : 823104000000,
		"total" : 1500
	}, {
		"time" : 886262400000,
		"total" : 1000
	}]
}			
			</pre>		
		</div>
		<div>
			<a onclick="Ccay.example.openTry('#barDemo',$('#js3').html(),$('#html3').html())">试一试</a>
		</div>
	</div>
	
	<div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:200px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
  	
	<div title="FAQ">
	  	<form class="init ccay-form">
	    <div class="ccay-form-body">
	    	<ul></ul>
		</div>     
		<div class="ccay-form-custom">
	    <ul>                     
	        <li class="ccay-form-row">
	           <samp><h3>问题</h3></samp>
	           <span class="ccay-form-input">
	               <h3>解决方案</h3>
	           </span>
	        </li>
	        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
	        <li class="ccay-form-row">
	            <samp class="i18n" i18nKey=""></samp>                          
	            <span class="ccay-form-input"></span>
	        </li>  
	    </ul>
		</div>
	  	</form> 
	</div>
</div>

